<!doctype html>
<title>Editing event tests</title>
<script src=http://w3c-test.org/resources/testharness.js></script>
<script src=http://w3c-test.org/resources/testharnessreport.js></script>
<div id=test></div>
<div id=log></div>
<script>
"use strict";

var div = document.querySelector("#test");
add_completion_callback(function() { div.parentNode.removeChild(div) });

function copyEvent(e) {
	var ret = {};
	ret.original = e;
	["type", "target", "currentTarget", "eventPhase", "bubbles", "cancelable",
	"defaultPrevented", "isTrusted", "command", "value"].forEach(function(k) {
		ret[k] = e[k];
	});
	return ret;
}

var tests = [
	{
		name: "Simple editable div",
		html: "<div contenteditable>foo<b>bar</b>baz</div>",
		initRange: function(range) {
			range.setStart(div.querySelector("b").firstChild, 0);
			range.setEnd(div.querySelector("b"), 1);
		},
		target: function() { return div.firstChild },
		command: "bold",
		value: "",
	},
	{
		name: "Editable b",
		html: "foo<b contenteditable>bar</b>baz",
		initRange: function(range) {
			range.setStart(div.querySelector("b").firstChild, 0);
			range.setEnd(div.querySelector("b"), 1);
		},
		target: function() { return div.querySelector("b") },
		command: "bold",
		value: "",
	},
	{
		name: "No editable content",
		html: "foo<b>bar</b>baz",
		initRange: function(range) {
			range.setStart(div.querySelector("b").firstChild, 0);
			range.setEnd(div.querySelector("b"), 1);
		},
		target: function() { return null },
		command: "bold",
		value: "",
	},
	{
		name: "Partially-selected editable content",
		html: "foo<b contenteditable>bar</b>baz",
		initRange: function(range) {
			range.setStart(div.querySelector("b").firstChild, 0);
			range.setEnd(div, 3);
		},
		target: function() { return null },
		command: "bold",
		value: "",
	},
	{
		name: "Selection spans two editing hosts",
		html: "<div contenteditable>foo</div><div contenteditable>bar</div>",
		initRange: function(range) {
			range.setStart(div.querySelector("div").firstChild, 2);
			range.setEnd(div.querySelector("div + div").firstChild, 1);
		},
		target: function() { return null },
		command: "bold",
		value: "",
	},
	{
		name: "Selection includes two editing hosts",
		html: "foo<div contenteditable>bar</div>baz<div contenteditable>quz</div>qoz",
		initRange: function(range) {
			range.setStart(div.firstChild, 2);
			range.setEnd(div.lastChild, 1);
		},
		target: function() { return null },
		command: "bold",
		value: "",
	},
	{
		name: "Changing selection from handler",
		html: "<div contenteditable>foo</div><div contenteditable>bar</div>",
		initRange: function(range) {
			range.setStart(div.querySelector("div").firstChild, 0);
			range.setEnd(div.querySelector("div").firstChild, 3);
		},
		target: function() { return div.firstChild },
		finalTarget: function() { return div.lastChild },
		beforeInputAction: function() {
			getSelection().removeAllRanges();
			var range = document.createRange();
			range.setStart(div.querySelector("div + div").firstChild, 0);
			range.setEnd(div.querySelector("div + div").firstChild, 3);
			getSelection().addRange(range);
		},
		command: "bold",
		value: "",
	},
];

var commandTests = {
	backColor: ["green"],
	createLink: ["http://www.w3.org/community/editing/"],
	fontName: ["serif", "Helvetica"],
	fontSize: ["6", "15px"],
	foreColor: ["green"],
	hiliteColor: ["green"],
	italic: [],
	removeFormat: [],
	strikeThrough: [],
	subscript: [],
	superscript: [],
	underline: [],
	unlink: [],
	delete: [],
	formatBlock: ["p"],
	forwardDelete: [],
	indent: [],
	insertHorizontalRule: ["id"],
	insertHTML: ["<b>hi</b>"],
	insertImage: ["http://example.com/some-image"],
	insertLineBreak: [],
	insertOrderedList: [],
	insertParagraph: [],
	insertText: ["abc"],
	insertUnorderedList: [],
	justifyCenter: [],
	justifyFull: [],
	justifyLeft: [],
	justifyRight: [],
	outdent: [],
	redo: [],
	selectAll: [],
	styleWithCSS: [],
	undo: [],
	useCSS: [],
};

Object.keys(commandTests).forEach(function(command) {
	commandTests[command] = ["", "quasit"].concat(commandTests[command]);
	commandTests[command].forEach(function(value) {
		tests.push({
			name: "Command " + command + ", value " + format_value(value),
			html: "<div contenteditable>foo<b>bar</b>baz</div>",
			initRange: function(range) {
				range.setStart(div.querySelector("b").firstChild, 0);
				range.setEnd(div.querySelector("b"), 1);
			},
			target: function() {
				return ["redo", "selectAll", "styleWithCSS", "undo", "useCSS"]
					.indexOf(command) == -1 ? div.firstChild : null;
			},
			command: command,
			value: value,
		});
	});
});

tests.forEach(function(obj) {
	[true, false].forEach(function(cancel) {
		// Kill all event handlers first
		var newDiv = div.cloneNode(false);
		div.parentNode.insertBefore(newDiv, div);
		div.parentNode.removeChild(div);
		div = newDiv;

		div.innerHTML = obj.html;

		var originalContents = div.cloneNode(true);

		getSelection().removeAllRanges();
		var range = document.createRange();
		obj.initRange(range);
		getSelection().addRange(range);

		var target = obj.target();
		var finalTarget = "finalTarget" in obj ? obj.finalTarget() : target;
		var command = obj.command;
		var value = obj.value;

		var beforeInputEvents = [];
		var inputEvents = [];
		div.addEventListener("beforeinput", function(e) {
			var copied = copyEvent(e);
			copied.inputEventsLength = inputEvents.length;
			beforeInputEvents.push(copied);
			if (cancel) {
				e.preventDefault();
			}
			if ("beforeInputAction" in obj) {
				obj.beforeInputAction();
			}
		});
		div.addEventListener("input", function(e) { inputEvents.push(copyEvent(e)) });

		// Uncomment this code instead of the execCommand() to make all the
		// tests pass, as a sanity check
		//var e = new Event("beforeinput", {bubbles: true, cancelable: true});
		//e.command = command;
		//e.value = value;
		//var ret = target ? target.dispatchEvent(e) : false;
		//if (ret) {
		//	var e = new Event("input", {bubbles: true});
		//	e.command = command;
		//	e.value = value;
		//	finalTarget.dispatchEvent(e);
		//}

		var exception = null;
		try {
			document.execCommand(command, false, value);
		} catch(e) {
			exception = e;
		}

		test(function() {
			assert_equals(exception, null, "Unexpected exception");
		}, obj.name + ": execCommand() must not throw, "
		+ (cancel ? "canceled" : "uncanceled"));

		test(function() {
			assert_equals(beforeInputEvents.length, target ? 1 : 0,
				"number of beforeinput events fired");
			if (beforeInputEvents.length == 0) {
				assert_equals(inputEvents.length, 0, "number of input events fired");
				return;
			}
			var e = beforeInputEvents[0];
			assert_equals(e.inputEventsLength, 0, "number of input events fired");
			assert_equals(e.type, "beforeinput", "event.type");
			assert_equals(e.target, target, "event.target");
			assert_equals(e.currentTarget, div, "event.currentTarget");
			assert_equals(e.eventPhase, Event.BUBBLING_PHASE, "event.eventPhase");
			assert_equals(e.bubbles, true, "event.bubbles");
			assert_equals(e.cancelable, true, "event.cancelable");
			assert_equals(e.defaultPrevented, false, "event.defaultPrevented");
			assert_equals(e.command, command, "e.command");
			assert_equals(e.value, value, "e.value");
			assert_own_property(window, "EditingBeforeInputEvent",
				"window.EditingBeforeInputEvent must exist");
			assert_equals(Object.getPrototypeOf(e.original),
				EditingBeforeInputEvent.prototype,
				"event prototype");
			assert_true(originalContents.isEqualNode(div),
				"div contents not yet changed");
			assert_equals(e.isTrusted, true, "event.isTrusted");
		}, obj.name + ": beforeinput event, " + (cancel ? "canceled" : "uncanceled"));

		test(function() {
			assert_equals(inputEvents.length, target && !cancel ? 1 : 0,
				"number of input events fired");
			if (!target || cancel) {
				assert_true(originalContents.isEqualNode(div),
					"div contents must not be changed");
				return;
			}
			var e = inputEvents[0];
			assert_equals(e.type, "input", "event.type");
			assert_equals(e.target, finalTarget, "event.target");
			assert_equals(e.currentTarget, div, "event.currentTarget");
			assert_equals(e.eventPhase, Event.BUBBLING_PHASE, "event.eventPhase");
			assert_equals(e.bubbles, true, "event.bubbles");
			assert_equals(e.cancelable, false, "event.cancelable");
			assert_equals(e.defaultPrevented, false, "event.defaultPrevented");
			assert_equals(e.command, command, "e.command");
			assert_equals(e.value, value, "e.value");
			assert_own_property(window, "EditingInputEvent",
				"window.EditingInputEvent must exist");
			assert_equals(Object.getPrototypeOf(e.original),
				EditingInputEvent.prototype,
				"event prototype");
			assert_equals(e.isTrusted, true, "event.isTrusted");
		}, obj.name + ": input event, " + (cancel ? "canceled" : "uncanceled"));
	});
});

// Thanks, Gecko.
document.body.bgColor = "";
</script>
